// $iconUrl = '/vuepress-docs-template'

.custom-block
  .custom-block-title
    font-weight 600
    margin-bottom -0.4rem
  &.tip, &.warning, &.danger
    padding .1rem 1.5rem
    border-left-width .5rem
    border-left-style solid
    margin 1rem 0
  &.tip
    background-color #f3f5f7
    border-color #42b983
  &.warning
    background-color rgba(255,229,100,.3)
    border-color darken(#ffe564, 35%)
    color darken(#ffe564, 70%)
    .custom-block-title
      color darken(#ffe564, 50%)
    a
      color $textColor
  &.danger
    background-color #ffe6e6
    border-color darken(red, 20%)
    color darken(red, 70%)
    .custom-block-title
      color darken(red, 40%)
    a
      color $textColor
  // &.details
  //   display block
  //   position relative
  //   border-radius 2px
  //   margin 1.6em 0
  //   padding 1.6em
  //   background-color #eee
  //   h4
  //     margin-top 0
  //   figure, p
  //     &:last-child
  //       margin-bottom 0
  //       padding-bottom 0
  //   summary
  //     outline none
  //     cursor pointer


// .custom-block 
//   padding 0.1rem 1.5rem
//   margin 2em 0
//   border-left-width 0.5rem
//   border-left-style solid
//   position relative
//   border-bottom-right-radius 2px
//   border-top-right-radius 2px
//   margin 1rem 0
//   &::before 
//     position absolute
//     top 19px
//     left -14px
//     color #fff
//     width 20px
//     height 20px
//     border-radius 100%
//     text-align center
//     line-height 20px
//     font-weight bold
//     font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
//     font-size 14px
//   p
//     color #222

//   .custom-block-title
//     font-weight 600
//     margin-bottom -0.4rem

//   &.info
//     border-color #007bff
//     background-color #f8f8f8
//     &::before
//       content url($iconUrl + '/images/icons/info.svg')
//       width 25px
//       height 25px
//       left -16px
//       box-sizing border-box

//   &.tip 
//     border-color #42b983
//     background-color #f8f8f8
//     &::before 
//       content url($iconUrl + '/images/icons/bulb.svg')
//       width 25px
//       height 25px
//       left -16px

//   &.warning
//     border-color #f4cd00
//     background-color #f8f8f8
//     .custom-block-title 
//       color #222
//     &::before 
//       content url($iconUrl + '/images/icons/danger.svg')
//       width 25px
//       height 25px
//       left -16px
//       box-sizing border-box

//   &.danger 
//     border-color #f66
//     background-color #f8f8f8
//     .custom-block-title 
//       color #222
//     &::before 
//       content url($iconUrl + '/images/icons/stop.svg')
//       width 25px
//       height 25px
//       left -16px

//   &.details 
//     display block
//     position relative
//     border-radius 2px
//     margin 1.6em 0
//     padding 1.6em
//     background-color #eee
//     h4 
//       margin-top 0
//     figure
//     p 
//       &:last-child 
//         margin-bottom 0
//         padding-bottom 0
//     summary 
//       outline none
//       cursor pointer

.custom-block.details 
  display block
  position relative
  border-radius 2px
  margin 1.6em 0
  padding 1.6em
  background-color #eee
  h4 
    margin-top 0
  figure
  p 
    &:last-child 
      margin-bottom 0
      padding-bottom 0
  summary 
    outline none
    cursor pointer
